<template>
  <XenPageLayout
    title="基本信息"
    title-align="left"
    :show-back="true"
    navbar-bg-color="#059669"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    :loading="loading"
    :error="hasError"
    @retry="loadDetail"
  >
    <view class="detail-page">
      <view v-if="!loading && !hasError" class="detail-container">
        <!-- 基本信息卡片 -->
        <view class="detail-card">
          <view class="detail-header">
            <text class="header-title">基本信息</text>
            <text class="header-subtitle">个人基础档案信息</text>
          </view>

          <view class="detail-content">
            <!-- 照片信息模块 -->
            <view v-if="hasPhotoInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="heart" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">照片信息</text>
              </view>

              <!-- 个人照片展示区域 -->
              <view v-if="userDetail.PhotoId" class="photo-section">
                <view class="photo-container">
                  <image
                    :src="getImageUrl(userDetail.PhotoId)"
                    class="user-photo"
                    mode="aspectFill"
                    @error="handlePhotoError"
                    @tap="previewImage(userDetail.PhotoId, 'photo')"
                  />
                  <text class="photo-label">个人照片</text>
                </view>
              </view>

              <!-- 身份证照片展示区域 -->
              <view
                v-if="
                  userDetail.IdCardFrontPhotoId || userDetail.IdCardBackPhotoId
                "
                class="id-card-section"
              >
                <text class="id-card-title">身份证照片</text>
                <view class="id-card-photos">
                  <view
                    v-if="userDetail.IdCardFrontPhotoId"
                    class="id-card-item"
                  >
                    <image
                      :src="getImageUrl(userDetail.IdCardFrontPhotoId)"
                      class="id-card-photo"
                      mode="aspectFit"
                      @error="handleIdCardError"
                      @tap="
                        previewImage(userDetail.IdCardFrontPhotoId, 'front')
                      "
                    />
                    <text class="id-card-label">身份证正面</text>
                  </view>
                  <view
                    v-if="userDetail.IdCardBackPhotoId"
                    class="id-card-item"
                  >
                    <image
                      :src="getImageUrl(userDetail.IdCardBackPhotoId)"
                      class="id-card-photo"
                      mode="aspectFit"
                      @error="handleIdCardError"
                      @tap="previewImage(userDetail.IdCardBackPhotoId, 'back')"
                    />
                    <text class="id-card-label">身份证反面</text>
                  </view>
                </view>
              </view>

              <!-- 退伍证照片展示区域 -->
              <view
                v-if="userDetail.VeteranCertificateId"
                class="id-card-section"
              >
                <text class="id-card-title">退伍证照片</text>
                <view class="id-card-photos">
                  <view class="id-card-item">
                    <image
                      :src="getImageUrl(userDetail.VeteranCertificateId)"
                      class="id-card-photo"
                      mode="aspectFit"
                      @error="handleVeteranCertError"
                      @tap="
                        previewImage(userDetail.VeteranCertificateId, 'veteran')
                      "
                    />
                    <text class="id-card-label">退伍证</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- 基本信息模块 -->
            <view v-if="hasBasicInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="person" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">基本信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.Name" class="info-item">
                  <text class="info-label">姓名</text>
                  <text class="info-value name-value">{{
                    userDetail.Name
                  }}</text>
                </view>
                <view v-if="userDetail.StaffNo" class="info-item">
                  <text class="info-label">员工工号</text>
                  <text class="info-value staff-no-value">{{
                    userDetail.StaffNo
                  }}</text>
                </view>
                <view v-if="userDetail.IdCardNo" class="info-item">
                  <text class="info-label">身份证号</text>
                  <text class="info-value">{{
                    maskIdCard(userDetail.IdCardNo)
                  }}</text>
                </view>
                <view v-if="userDetail.Gender" class="info-item">
                  <text class="info-label">性别</text>
                  <text class="info-value">{{ userDetail.Gender }}</text>
                </view>
                <view v-if="userDetail.BirthDate" class="info-item">
                  <text class="info-label">出生日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.BirthDate)
                  }}</text>
                </view>
                <view v-if="userDetail.Age" class="info-item">
                  <text class="info-label">年龄</text>
                  <text class="info-value">{{ userDetail.Age }}岁</text>
                </view>
                <view v-if="userDetail.Ethnicity" class="info-item">
                  <text class="info-label">民族</text>
                  <text class="info-value">{{ userDetail.Ethnicity }}</text>
                </view>
                <view v-if="userDetail.HighestEducation" class="info-item">
                  <text class="info-label">最高学历</text>
                  <text class="info-value">{{
                    userDetail.HighestEducation
                  }}</text>
                </view>
                <view v-if="userDetail.MajorCategory" class="info-item">
                  <text class="info-label">专业大类</text>
                  <text class="info-value">{{ userDetail.MajorCategory }}</text>
                </view>
                <view v-if="userDetail.MajorName" class="info-item">
                  <text class="info-label">专业名称</text>
                  <text class="info-value">{{ userDetail.MajorName }}</text>
                </view>
                <view v-if="userDetail.MaritalStatus" class="info-item">
                  <text class="info-label">婚姻状况</text>
                  <text class="info-value">{{ userDetail.MaritalStatus }}</text>
                </view>
                <view v-if="userDetail.FertilityStatus" class="info-item">
                  <text class="info-label">生育状况</text>
                  <text class="info-value">{{
                    userDetail.FertilityStatus
                  }}</text>
                </view>
                <view v-if="userDetail.BloodType" class="info-item">
                  <text class="info-label">血型</text>
                  <text class="info-value">{{ userDetail.BloodType }}</text>
                </view>
                <view v-if="userDetail.IdCardExpiryDate" class="info-item">
                  <text class="info-label">身份证有效期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.IdCardExpiryDate)
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 联系方式模块 -->
            <view v-if="hasContactInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="phone" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">联系方式</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.Phone" class="info-item">
                  <text class="info-label">联系电话</text>
                  <text class="info-value">{{
                    maskPhone(userDetail.Phone)
                  }}</text>
                </view>
                <view v-if="userDetail.Email" class="info-item">
                  <text class="info-label">邮箱</text>
                  <text class="info-value">{{
                    maskEmail(userDetail.Email)
                  }}</text>
                </view>
                <view v-if="userDetail.HomeAddress" class="info-item">
                  <text class="info-label">家庭住址</text>
                  <text class="info-value">{{ userDetail.HomeAddress }}</text>
                </view>
              </view>
            </view>

            <!-- 户籍信息模块 -->
            <view v-if="hasHouseholdInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="location" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">户籍信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.HouseholdRegistration" class="info-item">
                  <text class="info-label">户口所在地</text>
                  <text class="info-value">{{
                    userDetail.HouseholdRegistration
                  }}</text>
                </view>
                <view v-if="userDetail.NativePlace" class="info-item">
                  <text class="info-label">籍贯</text>
                  <text class="info-value">{{ userDetail.NativePlace }}</text>
                </view>
              </view>
            </view>

            <!-- 工作信息模块 -->
            <view v-if="hasWorkInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="wallet" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">工作信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.Org?.Text" class="info-item">
                  <text class="info-label">人事组织</text>
                  <text class="info-value">{{ userDetail.Org.Text }}</text>
                </view>
                <view v-if="userDetail.Group?.Text" class="info-item">
                  <text class="info-label">所属部门</text>
                  <text class="info-value">{{ userDetail.Group.Text }}</text>
                </view>
                <view v-if="userDetail.JobPosition?.Text" class="info-item">
                  <text class="info-label">工作岗位</text>
                  <text class="info-value">{{
                    userDetail.JobPosition.Text
                  }}</text>
                </view>
                <view v-if="userDetail.JoinWorkDate" class="info-item">
                  <text class="info-label">参加工作时间</text>
                  <text class="info-value">{{
                    formatDate(userDetail.JoinWorkDate)
                  }}</text>
                </view>
                <view v-if="workYears !== null" class="info-item">
                  <text class="info-label">工龄</text>
                  <text class="info-value">{{ workYears }}年</text>
                </view>
                <view v-if="userDetail.IsVeteran" class="info-item">
                  <text class="info-label">是否退伍军人</text>
                  <text class="info-value">{{
                    formatVeteranStatus(userDetail.IsVeteran)
                  }}</text>
                </view>

                <view v-if="userDetail.HireDate" class="info-item">
                  <text class="info-label">入职日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.HireDate)
                  }}</text>
                </view>
                <view v-if="companyYears !== null" class="info-item">
                  <text class="info-label">司龄</text>
                  <text class="info-value">{{ companyYears }}年</text>
                </view>
                <view v-if="userDetail.ConfirmationDate" class="info-item">
                  <text class="info-label">转正日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ConfirmationDate)
                  }}</text>
                </view>
                <view v-if="userDetail.EmploymentType" class="info-item">
                  <text class="info-label">用工形式</text>
                  <text class="info-value">{{
                    userDetail.EmploymentType
                  }}</text>
                </view>
                <view v-if="userDetail.ContractType" class="info-item">
                  <text class="info-label">劳动合同类型</text>
                  <text class="info-value">{{ userDetail.ContractType }}</text>
                </view>
                <view v-if="userDetail.ContractNo" class="info-item">
                  <text class="info-label">合同编号</text>
                  <text class="info-value">{{ userDetail.ContractNo }}</text>
                </view>
                <view v-if="userDetail.ContractStartDate" class="info-item">
                  <text class="info-label">合同起始日</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ContractStartDate)
                  }}</text>
                </view>
                <view v-if="userDetail.ContractEndDate" class="info-item">
                  <text class="info-label">合同终止日</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ContractEndDate)
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 政治信息模块 -->
            <view v-if="hasPoliticalInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="star" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">政治信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.PoliticalStatus" class="info-item">
                  <text class="info-label">政治面貌</text>
                  <text class="info-value">{{
                    userDetail.PoliticalStatus
                  }}</text>
                </view>
                <view v-if="userDetail.PartyJoinDate" class="info-item">
                  <text class="info-label">入党(团)日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.PartyJoinDate)
                  }}</text>
                </view>
                <view v-if="userDetail.PartyBranch" class="info-item">
                  <text class="info-label">入党所在支部</text>
                  <text class="info-value">{{ userDetail.PartyBranch }}</text>
                </view>
                <view v-if="userDetail.ArchiveLocation" class="info-item">
                  <text class="info-label">档案所在地</text>
                  <text class="info-value">{{
                    userDetail.ArchiveLocation
                  }}</text>
                </view>
                <view v-if="userDetail.ArchiveNo" class="info-item">
                  <text class="info-label">存档号</text>
                  <text class="info-value">{{ userDetail.ArchiveNo }}</text>
                </view>
                <view
                  v-if="userDetail.ArchiveTransferOutDate"
                  class="info-item"
                >
                  <text class="info-label">档案调出日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ArchiveTransferOutDate)
                  }}</text>
                </view>
                <view v-if="userDetail.ArchiveTransferInDate" class="info-item">
                  <text class="info-label">档案调入日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ArchiveTransferInDate)
                  }}</text>
                </view>
                <view v-if="userDetail.ArchiveAgeDate" class="info-item">
                  <text class="info-label">档案年龄日期</text>
                  <text class="info-value">{{
                    formatDate(userDetail.ArchiveAgeDate)
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 银行信息模块 -->
            <view v-if="hasBankInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="wallet" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">银行信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.SalaryBank" class="info-item">
                  <text class="info-label">工资卡银行</text>
                  <text class="info-value">{{ userDetail.SalaryBank }}</text>
                </view>
                <view v-if="userDetail.SalaryAccount" class="info-item">
                  <text class="info-label">工资卡号</text>
                  <text class="info-value">{{
                    maskBankCard(userDetail.SalaryAccount)
                  }}</text>
                </view>
                <view v-if="userDetail.BonusBank" class="info-item">
                  <text class="info-label">奖金卡银行</text>
                  <text class="info-value">{{ userDetail.BonusBank }}</text>
                </view>
                <view v-if="userDetail.BonusAccount" class="info-item">
                  <text class="info-label">奖金卡号</text>
                  <text class="info-value">{{
                    maskBankCard(userDetail.BonusAccount)
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 其他信息模块 -->
            <view v-if="hasOtherInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="compose" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">其他信息</text>
              </view>

              <view class="info-grid">
                <view v-if="userDetail.Hobbies" class="info-item">
                  <text class="info-label">兴趣爱好</text>
                  <text class="info-value">{{ userDetail.Hobbies }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import Api from "../api/index";
import type { GetResponse } from "../api/interface";
import XenPageLayout from "../../../layouts/XenPageLayout.vue";

// 响应式数据
const loading = ref(true);
const hasError = ref(false);
const userId = ref<string>("");

// 用户详情数据 - 使用GetResponse的Entity类型
const userDetail = ref<GetResponse["Entity"]>({
  ID: null,
  BillCode: null,
  BillStatus: null,
  WorkflowStatus: null,
  Remark: null,
  Approver: null,
  ApprovalTime: null,
  Name: null,
  StaffNo: null,
  BirthDate: null,
  Age: null,
  Gender: null,
  Ethnicity: null,
  HighestEducation: null,
  MajorCategory: null,
  MajorName: null,
  MaritalStatus: null,
  FertilityStatus: null,
  PhotoId: null,
  Photo: undefined,
  IdCardNo: null,
  IdCardFrontPhotoId: null,
  IdCardFrontPhoto: undefined,
  IdCardBackPhotoId: null,
  IdCardBackPhoto: undefined,
  IdCardExpiryDate: null,
  HouseholdRegistration: null,
  NativePlace: null,
  PoliticalStatus: null,
  PartyJoinDate: null,
  PartyBranch: null,
  ArchiveLocation: null,
  ArchiveNo: null,
  ArchiveTransferOutDate: null,
  ArchiveTransferInDate: null,
  HomeAddress: null,
  Phone: null,
  Email: null,
  SalaryBank: null,
  SalaryAccount: null,
  BonusBank: null,
  BonusAccount: null,
  OrgId: null,
  Org: undefined,
  GroupId: null,
  Group: undefined,
  JobPositionId: null,
  JobPosition: undefined,
  ResumeId: null,
  Resume: undefined,
  HireDate: null,
  ConfirmationDate: null,
  EmploymentType: null,
  ContractType: null,
  ContractNo: null,
  ContractStartDate: null,
  ContractEndDate: null,
  ResignationDate: null,
  ResignationReason: null,
  ResignationType: null,
  State: null,
  BloodType: null,
  Hobbies: null,
  JoinWorkDate: null,
  ArchiveAgeDate: null,
  WorkYears: null,
  CompanyYears: null,
  IsVeteran: null,
  VeteranCertificateId: null,
});

// 用户信息
const userInfo = ref<any>(null);

// 用户人员信息
const userPersonInfo = ref<any>(null);

// 获取图片URL - 根据文件ID拼接完整URL
const getImageUrl = (fileId: string | null) => {
  if (!fileId) return "";
  return `${import.meta.env.VITE_BASE_URL}/api/_file/getfile/${fileId}`;
};

// 计算属性：判断各个模块是否有数据
const hasPhotoInfo = computed(() => {
  return !!(
    userDetail.value.PhotoId ||
    userDetail.value.IdCardFrontPhotoId ||
    userDetail.value.IdCardBackPhotoId ||
    userDetail.value.VeteranCertificateId
  );
});

const hasBasicInfo = computed(() => {
  return !!(
    userDetail.value.Name ||
    userDetail.value.StaffNo ||
    userDetail.value.IdCardNo ||
    userDetail.value.Gender ||
    userDetail.value.BirthDate ||
    userDetail.value.Age ||
    userDetail.value.Ethnicity ||
    userDetail.value.HighestEducation ||
    userDetail.value.MajorCategory ||
    userDetail.value.MajorName ||
    userDetail.value.MaritalStatus ||
    userDetail.value.FertilityStatus ||
    userDetail.value.BloodType ||
    userDetail.value.IdCardExpiryDate
  );
});

const hasContactInfo = computed(() => {
  return !!(
    userDetail.value.Phone ||
    userDetail.value.Email ||
    userDetail.value.HomeAddress
  );
});

const hasHouseholdInfo = computed(() => {
  return !!(
    userDetail.value.HouseholdRegistration || userDetail.value.NativePlace
  );
});

const hasPoliticalInfo = computed(() => {
  return !!(
    userDetail.value.PoliticalStatus ||
    userDetail.value.PartyJoinDate ||
    userDetail.value.PartyBranch ||
    userDetail.value.ArchiveLocation ||
    userDetail.value.ArchiveNo ||
    userDetail.value.ArchiveTransferOutDate ||
    userDetail.value.ArchiveTransferInDate ||
    userDetail.value.ArchiveAgeDate
  );
});

const hasBankInfo = computed(() => {
  return !!(
    userDetail.value.SalaryBank ||
    userDetail.value.SalaryAccount ||
    userDetail.value.BonusBank ||
    userDetail.value.BonusAccount
  );
});

const hasWorkInfo = computed(() => {
  return !!(
    userDetail.value.Org?.Text ||
    userDetail.value.Group?.Text ||
    userDetail.value.JobPosition?.Text ||
    userDetail.value.JoinWorkDate ||
    userDetail.value.IsVeteran ||
    userDetail.value.HireDate ||
    userDetail.value.ConfirmationDate ||
    userDetail.value.EmploymentType ||
    userDetail.value.ContractType ||
    userDetail.value.ContractNo ||
    userDetail.value.ContractStartDate ||
    userDetail.value.ContractEndDate
  );
});

const hasOtherInfo = computed(() => {
  return !!userDetail.value.Hobbies;
});

// 计算工龄
const workYears = computed(() => {
  if (!userDetail.value.JoinWorkDate) return null;
  const joinDate = new Date(userDetail.value.JoinWorkDate);
  const now = new Date();
  const years = now.getFullYear() - joinDate.getFullYear();
  const monthDiff = now.getMonth() - joinDate.getMonth();

  if (
    monthDiff < 0 ||
    (monthDiff === 0 && now.getDate() < joinDate.getDate())
  ) {
    return Math.max(0, years - 1);
  } else {
    return Math.max(0, years);
  }
});

// 计算司龄
const companyYears = computed(() => {
  if (!userDetail.value.HireDate) return null;
  const hireDate = new Date(userDetail.value.HireDate);
  const now = new Date();
  const years = now.getFullYear() - hireDate.getFullYear();
  const monthDiff = now.getMonth() - hireDate.getMonth();

  if (
    monthDiff < 0 ||
    (monthDiff === 0 && now.getDate() < hireDate.getDate())
  ) {
    return Math.max(0, years - 1);
  } else {
    return Math.max(0, years);
  }
});

// 加载用户人员信息
const loadUserPersonInfo = async () => {
  if (!userInfo.value?.ITCode) {
    hasError.value = true;
    uni.showToast({
      title: "缺少用户信息",
      icon: "none",
    });
    return;
  }

  try {
    const searchParams = {
      Limit: 50,
      Name: "",
      Page: 1,
      SortInfo: null,
      StaffNo: userInfo.value.ITCode,
      Phone: userInfo.value.Attributes?.CellPhone || "",
    };

    console.log("搜索人员信息参数:", searchParams);
    const res = await Api().search(searchParams);
    console.log("人员信息接口返回:", res);

    if (res && res.Data && Array.isArray(res.Data) && res.Data.length > 0) {
      userPersonInfo.value = res.Data[0];
      userId.value = userPersonInfo.value.ID;
      console.log("获取用户人员信息成功:", userPersonInfo.value);
      // 获取到人员信息后，加载详情
      await loadDetail();
    } else {
      hasError.value = true;
      console.log("未找到人员信息，返回数据:", res);
      uni.showToast({
        title: "未找到对应人员信息",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取用户人员信息异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取人员信息失败",
      icon: "none",
    });
  }
};

// 加载详情数据
const loadDetail = async () => {
  if (!userId.value) {
    uni.showToast({
      title: "缺少用户ID参数",
      icon: "none",
    });
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    const res = await Api().get(userId.value);
    console.log("详情接口返回:", res);

    if (res && res.Entity) {
      userDetail.value = res.Entity;
      console.log("获取用户详情成功:", userDetail.value);
    } else {
      hasError.value = true;
      console.log("详情数据异常，返回数据:", res);
      uni.showToast({
        title: "获取用户详情失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取用户详情异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取用户详情异常",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateStr: Date | string | null) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return String(dateStr);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
};

// 脱敏处理身份证号
const maskIdCard = (idCard: string | null) => {
  if (!idCard) return "";
  if (idCard.length < 10) return idCard;
  return idCard.replace(/(\d{3})\d*(\d{4})/, "$1***********$2");
};

// 脱敏处理手机号
const maskPhone = (phone: string | null) => {
  if (!phone) return "";
  if (phone.length < 7) return phone;
  return phone.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
};

// 脱敏处理邮箱
const maskEmail = (email: string | null) => {
  if (!email) return "";
  const atIndex = email.indexOf("@");
  if (atIndex <= 3) return email;
  return email.replace(/(.{3}).*(@.*)/, "$1***$2");
};

// 脱敏处理银行卡号
const maskBankCard = (cardNo: string | null) => {
  if (!cardNo) return "";
  if (cardNo.length < 8) return cardNo;
  return cardNo.replace(/(\d{4})\d*(\d{4})/, "$1****$2");
};

// 预览图片 - 统一的图片预览函数
const previewImage = (fileId: string, type: string) => {
  const imageUrl = getImageUrl(fileId);
  if (!imageUrl) {
    uni.showToast({
      title: "图片无效",
      icon: "none",
    });
    return;
  }

  uni.previewImage({
    urls: [imageUrl],
    current: imageUrl,
    success: () => {
      console.log(
        `预览${
          type === "front"
            ? "身份证正面"
            : type === "back"
              ? "身份证反面"
              : type === "photo"
                ? "个人"
                : type === "veteran"
                  ? "退伍证"
                  : ""
        }照片成功`,
      );
    },
    fail: (err) => {
      console.error("预览图片失败:", err);
      uni.showToast({
        title: "预览图片失败",
        icon: "none",
      });
    },
  });
};

// 处理照片加载错误
const handlePhotoError = (e: any) => {
  console.error("个人照片加载失败:", e);
};

// 处理身份证照片加载错误
const handleIdCardError = (e: any) => {
  console.error("身份证照片加载失败:", e);
};

// 处理退伍证照片加载错误
const handleVeteranCertError = (e: any) => {
  console.error("退伍证照片加载失败:", e);
};

// 格式化退伍军人状态
const formatVeteranStatus = (status: any) => {
  if (status === null || status === undefined) return "";
  if (typeof status === "boolean") {
    return status ? "是" : "否";
  }
  if (typeof status === "string") {
    if (status === "true" || status === "是") return "是";
    if (status === "false" || status === "否") return "否";
  }
  return String(status);
};

// 页面加载
onMounted(() => {
  // 从本地存储获取用户信息
  const cachedUserInfo = uni.getStorageSync("userInfo");
  if (cachedUserInfo) {
    userInfo.value = cachedUserInfo;
    console.log("基本信息页面加载用户信息:", cachedUserInfo);
    // 加载人员信息
    loadUserPersonInfo();
  } else {
    loading.value = false;
    hasError.value = true;
    uni.showToast({
      title: "请先登录",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.detail-page {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  padding: 20px;

  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
  }

  .header-subtitle {
    font-size: 14px;
    opacity: 0.9;
  }
}

.detail-content {
  padding: 24px;
}

.info-section {
  margin-bottom: 32px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f3f4f6;
}

.section-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #059669, #10b981);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #374151;
}

.info-grid {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
    }
  }
}

.info-label {
  color: #6b7280;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
  font-size: 14px;
}

.info-value {
  color: #374151;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  flex: 1;
  font-size: 14px;

  &.name-value {
    color: #059669;
    font-weight: 600;
  }

  &.staff-no-value {
    color: #2563eb;
    font-weight: 600;
  }
}

// 照片相关样式
.photo-section {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-photo {
  width: 120px;
  height: 150px;
  border-radius: 8px;
  border: 3px solid #f3f4f6;
  background-color: #f9fafb;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    border-color: #059669;
  }
}

.photo-label {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

// 身份证照片相关样式
.id-card-section {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.id-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  display: block;
}

.id-card-photos {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.id-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }
}

.id-card-photo {
  width: 120px;
  height: 76px;
  border-radius: 6px;
  border: 2px solid #e5e7eb;
  background-color: #ffffff;
  transition: all 0.3s ease;

  &:active {
    border-color: #059669;
    box-shadow: 0 4px 8px rgba(5, 150, 105, 0.2);
  }
}

.id-card-label {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

.nav-right {
  padding: 8px;
  cursor: pointer;
}

// 文件预览相关样式
.file-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f0f9ff;
  border-radius: 6px;
  border: 1px solid #e0f2fe;
  cursor: pointer;
  transition: all 0.3s ease;
  word-break: normal;
  text-align: left;
  flex-shrink: 0;

  &:active {
    background-color: #e0f2fe;
    transform: scale(0.98);
  }
}

.file-name {
  color: #374151;
  font-weight: 500;
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.preview-hint {
  color: #059669;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  flex-shrink: 0;
}
</style>
